<template>
	<view class="ellipse-tabbar-wrapper" :style="{ paddingBottom: safeAreaBottom + 'px' }">
		<!-- 椭圆形毛玻璃导航栏 -->
		<view class="ellipse-tabbar">
			<!-- 毛玻璃背景 -->
			<view class="glass-background"></view>
			
			<!-- 导航按钮容器 -->
			<view class="tab-buttons">
				<!-- 首页按钮 -->
				<view 
					class="tab-button" 
					:class="{ active: currentIndex === 0 }"
					@click="switchTab(0, '/pages/ai-trip/index/index')"
				>
					<view class="button-content">
						<image 
							:src="currentIndex === 0 ? '/static/images/tabbar/home_selected.png' : '/static/images/tabbar/home.png'"
							class="tab-icon-img"
							mode="aspectFit"
						/>
						<text class="tab-text">首页</text>
					</view>
					<view class="active-indicator" v-if="currentIndex === 0"></view>
				</view>
				
				<!-- 我的按钮 -->
				<view 
					class="tab-button" 
					:class="{ active: currentIndex === 1 }"
					@click="switchTab(1, '/pages/ai-trip/user/profile/index')"
				>
					<view class="button-content">
						<image 
							:src="currentIndex === 1 ? '/static/images/tabbar/mine_selected.png' : '/static/images/tabbar/mine.png'"
							class="tab-icon-img"
							mode="aspectFit"
						/>
						<text class="tab-text">我的</text>
					</view>
					<view class="active-indicator" v-if="currentIndex === 1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'EllipseTabBar',
	data() {
		return {
			currentIndex: 0,
			safeAreaBottom: 0
		}
	},
	mounted() {
		this.getSafeArea();
		this.getCurrentPageIndex();
	},
	methods: {
		getSafeArea() {
			const systemInfo = uni.getSystemInfoSync();
			this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
		},
		
		getCurrentPageIndex() {
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			const currentRoute = '/' + currentPage.route;
			
			console.log('当前页面路由:', currentRoute);
			
			if (currentRoute.includes('/pages/ai-trip/index/index')) {
				this.currentIndex = 0;
			} else if (currentRoute.includes('/pages/ai-trip/user/profile/index')) {
				this.currentIndex = 1;
			} else {
				// 默认设置为首页
				this.currentIndex = 0;
			}
		},
		
		switchTab(index, pagePath) {
			if (this.currentIndex === index) return;
			
			this.currentIndex = index;
			
			// 直接使用navigateTo进行页面跳转，避免switchTab的限制
			uni.navigateTo({
				url: pagePath,
				success: () => {
					console.log('navigateTo成功:', pagePath);
				},
				fail: (error) => {
					console.error('navigateTo失败，尝试reLaunch:', error);
					// 如果navigateTo失败，尝试使用reLaunch
					uni.reLaunch({
						url: pagePath
					});
				}
			});
			
			/* 原始跳转方法已注释，AI助手功能开发完成后可恢复
			this.currentIndex = index;
			
			// 使用系统原生的 switchTab，直接切换无动画
			uni.switchTab({
				url: pagePath,
				success: () => {
					console.log('switchTab成功:', pagePath);
				},
				fail: (err) => {
					console.error('switchTab失败，尝试navigateTo:', err);
					// 如果 switchTab 失败，尝试使用 navigateTo
					uni.navigateTo({
						url: pagePath,
						success: () => {
							console.log('navigateTo成功:', pagePath);
						},
						fail: (error) => {
							console.error('navigateTo也失败，尝试reLaunch:', error);
							// 最后尝试 reLaunch
							uni.reLaunch({
								url: pagePath
							});
						}
					});
				}
			});
			*/
		}
	}
}
</script>

<style scoped>
.ellipse-tabbar-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 40rpx 40rpx;
	pointer-events: none;
}

.ellipse-tabbar {
	position: relative;
	width: 700rpx;
	height: 140rpx;
	border-radius: 70rpx;
	overflow: hidden;
	pointer-events: auto;
	box-shadow: 
		0 8rpx 32rpx rgba(0, 0, 0, 0.12),
		0 2rpx 16rpx rgba(0, 0, 0, 0.08),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
	animation: float 6s ease-in-out infinite;
}

.glass-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.9) 0%, 
		rgba(255, 255, 255, 0.8) 50%, 
		rgba(248, 250, 252, 0.85) 100%);
	backdrop-filter: blur(30rpx);
	-webkit-backdrop-filter: blur(30rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.6);
}

.tab-buttons {
	position: relative;
	z-index: 2;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: space-around;
	padding: 0 40rpx;
}

.tab-button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 120rpx;
	height: 100rpx;
	border-radius: 50rpx;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}

.tab-button.active {
	background: linear-gradient(135deg, 
		rgba(74, 144, 226, 0.15) 0%, 
		rgba(86, 200, 216, 0.1) 100%);
	transform: translateY(-8rpx) scale(1.05);
	box-shadow: 
		0 8rpx 20rpx rgba(74, 144, 226, 0.2),
		inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
}

.center-button {
	transform: scale(1.1);
}

.center-button.active {
	transform: translateY(-8rpx) scale(1.15);
}

.button-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
}

.tab-icon-img {
	width: 48rpx;
	height: 48rpx;
	transition: all 0.3s ease;
}

.ai-icon-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ai-icon-img {
	width: 52rpx;
	height: 52rpx;
}

.ai-glow {
	position: absolute;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: radial-gradient(circle, 
		rgba(74, 144, 226, 0.3) 0%, 
		rgba(86, 200, 216, 0.2) 50%, 
		transparent 70%);
	animation: aiPulse 2s ease-in-out infinite;
}

@keyframes aiPulse {
	0%, 100% {
		transform: scale(0.8);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.9;
	}
}

.tab-text {
	font-size: 20rpx;
	font-weight: 500;
	color: #8E8E93;
	transition: all 0.3s ease;
	letter-spacing: 0.5rpx;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.tab-button.active .tab-text {
	color: #4a90e2;
	font-weight: 600;
	transform: scale(1.05);
}

.tab-button.active .tab-icon-img {
	transform: scale(1.1);
	filter: drop-shadow(0 4rpx 8rpx rgba(74, 144, 226, 0.3));
}

.active-indicator {
	position: absolute;
	top: 8rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 8rpx;
	height: 8rpx;
	background: linear-gradient(135deg, #4a90e2 0%, #56c8d8 100%);
	border-radius: 50%;
	box-shadow: 
		0 0 12rpx rgba(74, 144, 226, 0.6),
		0 0 24rpx rgba(74, 144, 226, 0.3);
	animation: indicatorGlow 2s ease-in-out infinite alternate;
}

@keyframes indicatorGlow {
	from {
		opacity: 0.8;
		transform: translateX(-50%) scale(1);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) scale(1.2);
	}
}

/* 毛玻璃边缘光效 */
.ellipse-tabbar::before {
	content: '';
	position: absolute;
	top: -2rpx;
	left: -2rpx;
	right: -2rpx;
	bottom: -2rpx;
	border-radius: 72rpx;
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.8) 0%, 
		rgba(255, 255, 255, 0.4) 25%, 
		rgba(255, 255, 255, 0.2) 50%, 
		rgba(255, 255, 255, 0.4) 75%, 
		rgba(255, 255, 255, 0.8) 100%);
	z-index: -1;
	animation: borderShimmer 3s ease-in-out infinite;
}

@keyframes borderShimmer {
	0%, 100% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.9;
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4rpx);
	}
}

/* 小屏设备适配 */
@media screen and (max-width: 375px) {
	.ellipse-tabbar {
		width: 420rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	
	.tab-buttons {
		padding: 0 40rpx;
	}
	
	.tab-button {
		min-width: 100rpx;
		height: 80rpx;
	}
	
	.tab-icon-img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.ai-icon-img {
		width: 44rpx;
		height: 44rpx;
	}
	
	.tab-text {
		font-size: 18rpx;
	}
}
</style>